<template>
    <div class="allHistoryClaaApp">
        <!--搜索栏-->
        <div class="HistoryCallBox-topCtl">
            <div class="HistoryCallBox-top">
                <el-form style="margin-left: 1%" class="HistoryCallBox-topDatas" ref="form" :inline="true"
                         :model="searchHistoryCallForm"
                         label-width="100px">
                    <el-form-item label="开始时间">
                        <el-date-picker v-model="startDate" type="datetime" placeholder="选择日期"
                                        format="yyyy-MM-dd HH:mm:ss"
                                        style="width: 100%;"
                                        value-format="timestamp"
                                        :editable="false"
                                        :picker-options="pickerOptionsStart"
                                        @change="changeStart">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="结束时间">
                        <el-date-picker v-model="endDate" type="datetime" placeholder="选择日期"
                                        style="width: 100%;"
                                        format="yyyy-MM-dd HH:mm:ss"
                                        value-format="timestamp"
                                        :clearable="true"
                                        :editable="false"
                                        :picker-options="pickerOptionsEnd"
                                        @change="changeEnd">
                        </el-date-picker>

                    </el-form-item>
                    <el-form-item label="呼入">
                        <el-checkbox v-model="searchHistoryCallForm.IncomingCall" label=""
                                     @change="changeCheckIncomingCall"></el-checkbox>
                    </el-form-item>
                    <el-form-item label="呼出" label-width="80px">
                        <el-checkbox v-model="searchHistoryCallForm.ExhaleCall" label=""
                                     @change="changeCheckIncomingCall"></el-checkbox>
                    </el-form-item>
                    <el-form-item >
                            <el-button type="primary" @click="querySearch" style="margin-left: 10px;margin-top: -4%!important;" class="gloSearchBtn20px">查询</el-button>
                    </el-form-item>

                </el-form>
            </div>
        </div>

        <!--数据栏-->
        <div class="HistoryCallDatasDownCtl">
            <div class="HistoryCallDatasDown">
                <div class="HistoryCallDatas">
                    <el-table
                            :data="tableHistoryCallDatas"
                            border
                            class="HistoryCallDatastable"
                            cell-class-name="dataManage18px"
                            :header-cell-style="headerCellClassName"
                    >
                        <el-table-column
                                prop="callType"
                                label="类型"
                                width="80"
                                align="center"
                        >
                            <template slot-scope="callStatus">
                                <div v-if="callStatus.row.callType ==1">呼出</div>
                                <div v-else-if="callStatus.row.callType ==0">呼入</div>
                            </template>
                        </el-table-column>

                        <el-table-column
                                prop="callernum"
                                label="主叫号码"
                                align="center"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="calledExtNumber"
                                label="被叫号码"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="starttime"
                                label="开始时间"
                                width="320"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="endtime"
                                label="结束时间"
                                width="320"
                                align="center">
                        </el-table-column>

                        <el-table-column
                                prop="CallDuration"
                                label="通话时长"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                width="150"
                                align="center">
                            <template slot-scope="scope">
                                <el-button @click="showTenHistoryCallDetail(scope.row)" type="text"
                                           size="medium" class="dataManage18px">详情
                                </el-button>
                                <el-button @click="handleCallBackClick(scope.row.callParNumber)" type="text"
                                           size="medium" class="dataManage18px">回拨
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination v-show="total>0"
                                   layout="total,prev, pager, next"
                                   background
                                   @current-change="changePageNum"
                                   :current-page="pageNum"
                                   :page-size="pageSize"
                                   :total="total"
                                   :hide-on-single-page="showPage">
                    </el-pagination>
                </div>
            </div>
        </div>
        <el-dialog
                title="通话详情"
                :visible.sync="lastTenHistoryCall.lastTenHistoryCallDatasvisible"
                width="35%"
                top="20vh"
        >
            <div class="lableTop dataManage18px">呼叫类型：
                <div class="detailsFloatR">
                    <template v-if="lastTenHistoryCall.callDetails.type===0">呼入</template>
                    <template v-if="lastTenHistoryCall.callDetails.type===1">呼出</template>
                </div>
            </div>
            <!--                <div>是否紧急号码：{{// lastTenHistoryCall.callDetails.EmergencyNumberType}}</div>-->
            <div class="lableTop dataManage18px">开始时间：
                <div class="detailsFloatR">
                    {{lastTenHistoryCall.callDetails.startdate}}
                </div>
            </div>
            <div class="lableTop dataManage18px">结束时间：
                <div class="detailsFloatR">
                    {{lastTenHistoryCall.callDetails.endtime}}
                </div>
            </div>
            <!--            <div>名称：{{lastTenHistoryCall.callDetails.name}}</div>-->
            <div class="lableTop dataManage18px">通话时长：
                <div class="detailsFloatR">
                    {{lastTenHistoryCall.callDetails.CallDuration}}
                </div>
            </div>
            <div class="lableTop dataManage18px">主叫号码：
                <div class="detailsFloatR">
                    {{lastTenHistoryCall.callDetails.callernum}}
                </div>
            </div>
            <div class="lableTop dataManage18px">被叫号码：
                <div class="detailsFloatR">
                    {{lastTenHistoryCall.callDetails.calledExtNumber}}
                </div>
            </div>
            <div v-if="false" class="lableTop dataManage18px">系统类型：
                <div class="detailsFloatR">
                    <template v-if="lastTenHistoryCall.callDetails.SystemType===1">内通</template>
                    <template v-if="lastTenHistoryCall.callDetails.SystemType===2">固话</template>
                    <template v-if="lastTenHistoryCall.callDetails.SystemType===3">坐席</template>
                </div>

            </div>
            <span slot="footer" class="dialog-footer">
                      <el-button @click="lastTenHistoryCall.lastTenHistoryCallDatasvisible = false"
                                 size="medium"class="dataManageBtn22BtnpPx">关 闭</el-button>
                    <el-button @click="handleCallBackClick(lastTenHistoryCall.callDetails.callParNumber)"
                               type="primary" size="medium"class="dataManageBtn22BtnpPx">回 拨</el-button>
                 </span>
        </el-dialog>

    </div>
</template>

<script>
  import DispatchVoiceApi from '@/api/DispatchVoiceApi';
  import {mapActions, mapMutations} from 'vuex';

  export default {
    name: 'AllHistoryCall',
    props: {
      FleetId: Number,
      userId: Number,
      TelephoneBindExtnum: String,//当前调度员绑定话机的左分机号
      userAccount: String,//当前调度员绑定话机的左分机号
      homeWinMaximized: Number,
    },
    data() {
      return {
        //调度台绑定的话机信息
        TelephoneBind: {
          extnum: '',
          status: '',
          subId: '',
        },
        lastTenHistoryCall: {
          callDetails: '',
          //通话详情
          lastTenHistoryCallDatasvisible: false,
        },
        pickerOptionsStart: {},
        pickerOptionsEnd: {},
        startDateLimit: {
          disabledDate: (time) => {
            if (this.startDate != '') {
              return time.getTime() > new Date(this.startDate).getTime();
            } else {
              return time.getTime() < Date.now() - 8.64e7;//禁用当前日期之前的时间；如果没有后面的-8.64e6就是不可以选择今天的
            }
          },
        },
        endDateLimit: {
          disabledDate: (time) => {
            if (this.startDate != '') {
              return time.getTime() < new Date(this.startDate).getTime();//禁用开始日期之前的日期
            }
            return time.getTime() < Date.now() - 8.64e7; //减去一天的时间代表可以选择同一天;
          },
        },
        startDate: '',
        endDate: '',
        searchHistoryCallForm: {
          name: '',
          fleetId: '',
          startTime: '',//开始时间
          endTime: '',//结束时间
          checkList: ['呼入', '呼出'],
          IncomingCall: true,//呼入
          ExhaleCall: true,//呼出
          queryType: 0,//0：呼入或者呼出，1：呼出,2：呼入

        },
        total: 0,
        pageNum: 1,
        pageSize: 6,
        showPage: true,
        tableHistoryCallDatas:[],
        watchTableHeight: 200,
      };
    },
    created() {
      this.watchTableHeightQ();
      this.changeDmgPage();
    },

    mounted() {
      this.QueryBindTel();
      this.saveUserInfo();
      console.log(this.$store.getters.stateAllSubTypeDatas);
    },
    computed: {
      /*...mapState({
        login: state => state.login,
        // counts: state => state.counts
      })*/
      homeWinMaximized() {
        return this.homeWinMaximized;
      },
    },
    watch: {
      homeWinMaximized(val) {
        console.log(val);

        if (val) {
          switch (parseInt(val)) {
            case 1 :
              console.log(window.screen.width);
              if (window.screen.width == 1366) {
                this.watchTableHeight = 235;
              } else {
                this.watchTableHeight = 340;
              }

              break;
            case 0 :
              if (window.screen.width == 1366) {
                this.watchTableHeight = 200;
              } else {
                this.watchTableHeight = 200;
              }
              break;

          }
          console.log('this.watchTableHeight');
          console.log(this.watchTableHeight);
        }
      },
    },
    methods: {

      querySearch(){
        this.query(1);
        this.pageNum = 1;
      },

      changeDmgPage(){
        let w = window.screen.width;
        let h = window.screen.height;
        if (w == 1920) {
          if (h == 1280) {
          } else {
            this.pageSize = 5;
          }
        }
      },
      //表头样式
      headerCellClassName() {
        return 'font-size:18px;color:#515A6E;padding:10px 0px 10px 0px !important;background:#F5F5F6;border:1px solid #EBEBEB';
      },
      changeStart() { // 限制开始时间
        // if (this.endDate != '') {
        //   if (this.endDate <= this.startDate) {
        //     // this.$message.warning('结束时间必须大于开始时间！');
        //     this.startDate = '';
        //   }
        // }
        this.pickerOptionsEnd = Object.assign({}, this.pickerOptionsEnd, {
          disabledDate: (time) => {
            if (this.startDate) {
              return time.getTime() < this.startDate;
            }
          },
        });
      },

      changeEnd() { // 限制结束时间
        console.log(this.endDate);
       /* if (this.startDate != '') {
          if (this.endDate <= this.startDate) {
            // this.$message.warning('结束时间必须大于开始时间！');
            this.endDate = '';
          }
        }
*/
        this.pickerOptionsStart = Object.assign({}, this.pickerOptionsStart, {
          disabledDate: (time) => {
            if (this.endDate) {
              return time.getTime() > this.endDate;
            }
          },
        });
      },
      saveUserInfo() {
        // //保存用户信息
        // this.$store.dispatch('login', '新名字');
      },
      watchTableHeightQ() {
        if (window.screen.width == 1366) {
          this.watchTableHeight = 235;
        } else {
          this.watchTableHeight = 200;
        }
      },
      // T和Z时间转换
      changeDate(oldDate) {
        var dateee = new Date(oldDate).toJSON();//这个ie不兼容，会返回1970年的时间
        var date = new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().
            replace(/T/g, ' ').
            replace(/\.[\d]{3}Z/, '');
        return date;
        // return date;
      },
      timeFormat(time) {
        var date, Y, M, D, h, m, s;
        date = new Date(time);
        Y = date.getFullYear() + '-';
        M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        D = (date.getDate() < 10 ? ('0' + date.getDate()) : date.getDate()) + ' ';
        h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
        m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
        s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
        return Y + M + D + h + m + s;
      },


  timeFormatR(time) {
        var date, Y, M, D, h, m, s;
        date = new Date(time);
        Y = date.getFullYear() + '/';
        M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';
        D = (date.getDate() < 10 ? ('0' + date.getDate()) : date.getDate()) + ' ';
        h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
        m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
        s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
        return Y + M + D + h + m + s;
      },
      /*查询绑定的话机分机号，机场暂时只考虑左话机*/
      QueryBindTel() {
        // if (this.TelephoneBindExtnum !='') return;
        DispatchVoiceApi.queryBindTel({
          'id': this.userAccount,
          // 'id': '1005',
        }).then(res => {
          let leftExt = res.obj.list[0].leftExt;
          if (leftExt) {                       //已设置则直接监听话机
            this.TelephoneBind.extnum = leftExt;
            this.NumAndNameBySipN();
            this.query(1);

          } else {
            this.query(1);                         //未设置则return
          }
        }).catch(err => {

        });
      },
      NumAndNameBySipN() {
        DispatchVoiceApi.queryNumAndNameBySipN({
          sipnum: this.TelephoneBind.extnum,
        }).then(res => {
          this.TelephoneBind.subId = res.obj[0].subId;

        }).catch(err => {

        });
      },
      //通话时长
      cumputedBeginEndTime(dateEnd, dateBegin) {
        //如果传的是2020-12-4 12:23:12这样的格式算时间，先把-都转化为/.然后再计算
        // dateBegin = new Date(dateBegin.replace(/-/g, '/'));//将-转化为/，使用new Date
        // dateEnd = new Date(dateEnd.replace(/-/g, '/'));//将-转化为/，使用new Date
        // dateBegin = new Date(dateBegin);//获取时间毫秒值
        // dateEnd = new Date(dateEnd);//获取时间毫秒值
        // dateBegin = dateBegin.getTime();//获取时间毫秒值
        // dateEnd = dateEnd.getTime();//获取时间毫秒值
        let dateDiff = dateEnd - dateBegin;

        var hour = Math.floor(dateDiff / 1000 / 60 / 60);

        var minute = Math.floor(dateDiff / 1000 / 60 - hour * 60);

        var second = dateDiff / 1000 - hour * 60 * 60 - minute * 60;
        let retureTime = hour + '时 ' + minute + ' 分' + second + ' 秒';
        return retureTime;
      },
      addAudit() {
        /**
         * dcId:调度员的ID
         *type:操作类型 1-调度 2-对讲 3-地图 4-会议 5-业务管理 6-系统管理 7-会话
         * status:操作状态字符串
         * describe:操作描述
         * time:操作时间
         * fleetId:集团ID
         * detaiType:小类
         * remark；备注（选填）
         */
        let data = {
          dcId: 'wxq1',
          type: 1,
          status: '成功',
          describe: 'wejjfj,新增---',
          time: new Date,
          fleetId: 67,
          detailType: 31,
          remark: 'beis',
        };
        this.GlobalFunc.GlaAddAudit(data);
      },
      query(pageNum) {
        console.log('userId' + this.userId);
        let params = {
          leftExt: this.TelephoneBind.extnum,// 2
          userId: this.userId,
          type: this.searchHistoryCallForm.queryType,
          pageNum: pageNum ||  this.pageNum,
          pageSize: this.pageSize,
          startTime: this.startDate,
          endTime: this.endDate,
        };
        if (params.startTime != '') {
          params.startTime = this.changeDate(params.startTime);
        }
        if (params.endTime != '') {
          params.endTime = this.changeDate(params.endTime);
        }

        DispatchVoiceApi.queryIpRecord(params).then(res => {
          // 返回数据
          if (res.success) {
            var changeData = [];
            changeData = res.obj.list;
            for (var i = 0; i < changeData.length; i++) {
              if (changeData[i].starttime && changeData[i].endtime) {
                changeData[i]['CallDuration'] = this.cumputedBeginEndTime(changeData[i].endtime,changeData[i].starttime);
              }
              if (changeData[i].starttime) {
                if (this.timeFormat(changeData[i].starttime) != '' && this.timeFormat(changeData[i].starttime) !=
                    undefined && this.timeFormat(changeData[i].starttime) != null) {
                  changeData[i].starttime = this.GlobalFunc.timeFormatRow(changeData[i].starttime);
                }
              }
              if (changeData[i].endtime) {
                if (this.timeFormat(changeData[i].endtime) != '' && this.timeFormat(changeData[i].endtime) !=
                    undefined && this.timeFormat(changeData[i].endtime) != null) {
                  changeData[i].endtime = this.GlobalFunc.timeFormatRow(changeData[i].endtime);
                }
              }
              /*（1）callerid和当前调度员userId相同，则是呼出、或者callerid和调度员绑定的左话机号对应的subId相同，则为呼出*/
              if (changeData[i].callerid == this.userId || changeData[i].callerid == this.TelephoneBind.subId ||
                  parseInt(changeData[i].callernum) == parseInt(this.TelephoneBind.extnum)) { //判断呼出呼入类型
                // if (changeData[i].calledid == 1005) { //判断呼出呼入类型
                changeData[i]['callType'] = 1;
                changeData[i].callernum = this.$store.getters.extNumber;
                // changeData[i]['callParNumber'] = changeData[i].calledExtNumber;
                if(changeData[i].calledid =='0') {//内部系统呼出外部系统
                  // changeData[i].callednum = changeData[i].callednum;
                  changeData[i].calledExtNumber = changeData[i].callednum;
                  changeData[i]['callParNumber'] = changeData[i].callednum;
                }else{
                  changeData[i]['callParNumber'] = changeData[i].calledExtNumber;
                }
                if(changeData[i].calledType == 2){
                  changeData[i].calledExtNumber = changeData[i].callednum;
                  changeData[i]['callParNumber'] = changeData[i].callednum;
                }
              } else if(changeData[i].callerid ==0) {//外部系统呼入
                changeData[i]['callType'] = 0;
                // changeData[i].callernum = changeData[i].callernum;
                changeData[i].callernum = changeData[i].callernum;
                changeData[i]['callParNumber'] = changeData[i].callernum;
              } else if(changeData[i].calledid =='0') {//内部系统呼出外部系统
                changeData[i]['callType'] = 1;
                changeData[i].callernum = this.$store.getters.extNumber
                // changeData[i].callednum = changeData[i].callednum;
                changeData[i].calledExtNumber = changeData[i].callednum;
                changeData[i]['callParNumber'] = changeData[i].callednum;
              }else{
                changeData[i]['callType'] = 0;
                changeData[i]['callParNumber'] = changeData[i].callerExtNumber;
                changeData[i].callernum = changeData[i].callerExtNumber;
                changeData[i].calledExtNumber = this.$store.getters.extNumber;
                console.log(changeData[i].callerExtNumber);
              }

            }
            this.tableHistoryCallDatas = changeData;
            this.total = res.obj.total;
            if (this.total <= 1) {
              this.showPage = false;
            }
          } else {
          }

        }).catch(err => {
          // 异常情况
          console.log(err);
        });
      },
      //查看历史通话详情
      showTenHistoryCallDetail(row) {
        let detailsData = {
          type: row.callType,//消息类型
          startdate: row.starttime,//开始时间
          endtime: row.endtime,//结束时间
          CallDuration: row.CallDuration,//通话时长
          callernum: row.callernum,//主叫号码
          calledExtNumber: row.calledExtNumber,//被叫号码
          SystemType: 1,//TODO 系统类型可能会加
          callParNumber: row.callParNumber,
        };
        this.lastTenHistoryCall.callDetails = detailsData;
        console.log(detailsData);
        this.lastTenHistoryCall.lastTenHistoryCallDatasvisible = true;

      },
      //回拨
      handleCallBackClick(number) {
        if(number ==''|| number == null || number == undefined ){
          this.$message.warning("号码不存在")
          return;

        }
        let item = {
          extnum: number,
        };
        console.log('回拨数据');
        console.log(item);
        this.$emit('handleCallBackClick', item);
        this.lastTenHistoryCall.lastTenHistoryCallDatasvisible = false;
      },
      changePageNum(val) {
        this.pageNum = val;
        this.query();
      },
      //多选框事件
      changeCheckList(value) {
        console.log(value);
        if (value.length > 0) {
          for (let i = 0; i < value.length; i++) {
            console.log(value[i]);
            if (value[0] == '呼入') {
              this.searchHistoryCallForm.queryType = 2;

            } else if (value[i] == '呼出') {
              this.searchHistoryCallForm.queryType = 1;
            }
          }
        } else {
          this.searchHistoryCallForm.queryType = 0;
        }

      },
      changeCheckIncomingCall(val) {
        let type1 = this.searchHistoryCallForm.IncomingCall;
        let type2 = this.searchHistoryCallForm.ExhaleCall;
        //都勾选或都不勾选，查全部
        if (type1 && type2) {
          this.searchHistoryCallForm.queryType = 0;
        } else if (type1) {
          if (type2) {
            this.searchHistoryCallForm.queryType = 0;
          } else {
            this.searchHistoryCallForm.queryType = 2;//呼入
          }
        } else if (type2) {
          if (type1) {
            this.searchHistoryCallForm.queryType = 0;
          } else {
            this.searchHistoryCallForm.queryType = 1;//呼出
          }
        } else {
          this.searchHistoryCallForm.queryType = 0;
        }
        console.log('queryType:' + this.searchHistoryCallForm.queryType);
      },
      changeCheckExhaleCall(val) {
        console.log(val);
      },
      //查询
      handleQuerySubmit() {},

    },
  };
</script>

<style scoped>
    .a >>> .el-picker-panel__link-btn {
        display: none
    }

    .el-time-spinner__item {
        font-size: 20px !important;
    }

    .el-time-panel__btn {
        font-size: 20px !important;
    }

    /*时间选项样式*/
    .el-date-picker__header .el-date-picker__header-label {
        font-size: 22px
    }

    .el-input__inner {
        font-size: 20px!important;
    }

    .el-picker-panel__content .el-date-table {
        font-size: 22px !important;
        margin: 15px !important;
    }

    .el-date-table td span {
        width: 30px !important;
        height: 30px !important;
        line-height: 30px !important;
        position: absolute !important;
        left: 40% !important;
    }

    /deep/ .el-table__fixed-right-patch {
        background-color: #BCCFF7;
    }

    /deep/ th.gutter {
        background-color: #F5F5F6 !important;
    }

    /deep/ .el-form-item__label {
        font-size: 22px!important;
    }

    /deep/ .el-input__inner {
        font-size: 22px!important;
    }

    /deep/ .el-date-table {
        font-size: 20px;
    }

    /deep/ .el-dialog__title {
        font-size: 24px;
    }

    /deep/ .el-icon-close:before {
        font-size: 25px;
    }

    /deep/ .el-checkbox {
        height: 40px!important;;
        width: 40px!important;;
    }
    /deep/ .el-checkbox__inner {
        width: 40px!important;;
        height: 40px!important;;
    }

    /deep/ .el-checkbox /deep/ .el-checkbox__inner {
        height: 40px!important;
        width: 40px!important;
    }
    /deep/ .el-checkbox /deep/ .el-checkbox__inner:after {
        width: 15px!important;
        height: 15px!important;
        font-size: 26px!important;
        margin: 6px auto auto 6px!important;
        text-align: center;
        line-height: 40px;
    }/deep/ .el-checkbox /deep/ .el-checkbox__inner:before {
         /* font-size: 26px;
          margin: 5px auto auto 0px!important;
          text-align: center;
          line-height: 40px;*/
     }

    /deep/ .el-checkbox  {
        vertical-align: middle!important;
    }

    /*分页修改开始*/
    .el-pagination /deep/ .el-pagination__total {
        font-size: 20px;
        line-height: 60px;
    }.el-pagination /deep/ button /deep/ .el-icon .el-icon .el-icon-arrow-left {
         font-size: 50px;
         height: 60px;
         width: 40px;
     }
    /deep/  .el-pagination.is-background .btn-prev, .el-pager li{
        height: 60px;
        width: 60px;
    }/deep/ .el-pagination.is-background .btn-next, .el-pager li{
         height: 60px;
         width: 60px;
     }/deep/ .el-pagination .btn-prev  .el-icon{
          font-size: 40px;
      }/deep/ .el-pagination .btn-next .el-icon{
           font-size: 40px;
       }
    /*分页修改结束*/

    .dataManage20px {
        font-size: 20px !important;
    }

    .lableTop {
        margin-top: 5px;
    }


    .HistoryCallDatastable {
        overflow: hidden;
        height: 450px;
    }
    @media(max-height: 1080px) {
        .HistoryCallDatastable {
            overflow: hidden;
            height: 300px;
        }
    }

   /* .HistoryCallDatastable::-webkit-scrollbar { !*滚动条整体样式*!
        width: 36px;     !*高宽分别对应横竖滚动条的尺寸*!
        height: 16px;
        !*scrollbar-arrow-color:#dadada;*!
    }

    .HistoryCallDatastable::-webkit-scrollbar-track { !*滚动条里面轨道*!
        !*-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);*!
        !*border-radius: 0;*!
        background: #F5F7FA;
    }

    .HistoryCallDatastable::-webkit-scrollbar-thumb { !*滚动条里面小方块*!
        !*border-radius: 15px;*!
        !*-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);*!
        background: rgba(0, 0, 0, 0);
        !*scrollbar-arrow-color:#dadada;*!
        !*width: 0;*!
        !*height: 0;*!
    }

    .HistoryCallDatastable::-webkit-scrollbar-button {
        !*width: 30px;*!
        height: 20px;
        cursor: pointer;
    }
    .HistoryCallDatastable::-webkit-scrollbar-button:start {
        width: 10px;
        !*height: 20px;*!
        background: url('../../assets/images/upJT.png') no-repeat center center ;
        background-size: 40px 22px;
        cursor: pointer;
    }
    .HistoryCallDatastable::-webkit-scrollbar-button:end {
        width: 10px;
        !*height: 20px;*!
        background: url('../../assets/images/downJT.png') no-repeat center center ;
        background-size: 40px 22px;
        cursor: pointer;
    }*/




    .HistoryCallBox-topDatas {
        /*margin-top: 15px;*/
    }

    @media (max-width: 1366px) {
        .HistoryCallBox-topDatas {
            /*margin-top: 25px;*/
        }
    }

    .allHistoryClaaApp {
        font-size: 16px;
    }
</style>
<style>
    .el-input--small{
        font-size: 20px !important;
    }
    .el-time-spinner__item {
        font-size: 20px !important;
    }

    .el-time-panel__btn {
        font-size: 20px !important;
    }

    /*时间选项样式*/
    .el-date-picker__header .el-date-picker__header-label {
        font-size: 22px
    }

    .el-input__inner {
        font-size: 20px
    }

    .el-picker-panel__content .el-date-table {
        font-size: 22px !important;
        margin: 15px !important;
    }

    .el-date-table td span {
        width: 30px !important;
        height: 30px !important;
        line-height: 30px !important;
        position: absolute !important;
        left: 40% !important;
    }

    .el-picker-panel__footer button.el-button {
        font-size: 22px !important;
    }
</style>
